<template>
<view class="container">
  <view class="form-box">
    <view class="form-item">
      <view class="amt">提现金额：{{amt}} 元</view>
    </view>
    <view class="form-item">
      <view class="mobile" v-if="mobile && mobile != ''">绑定手机号：{{mobile}}</view>
      <view class="mobile" v-else>请去设置页面绑定手机</view>
    </view>

    <!-- 
    <view class="form-item-code">
      <view class="form-item code-item">
        <input class="code" value="{{code}}" bindinput="bindCodeInput" placeholder="验证码" />
        <image class="clear" id="clear-code" wx:if="{{ code.length > 0 }}" src="/static/images/clear_input.png" catchtap="clearInput"></image>
      </view>
      <view class="code-btn" bindtap="sendCode">获取验证码</view>
    </view>
    -->
    
    <button type="primary" class="register-btn" @tap="goWithdrawal">发起申请</button>

  </view>
</view>
</template>

<script>
let api = require("../../../config/api.js");
let util = require("../../../utils/util.js");
let check = require("../../../utils/check.js");
let user = require("../../../utils/user.js");
let app = getApp();

export default {
  data() {
    return {
      amt: '0.00',
      mobile: '',
      code: ''
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    let userInfo = uni.getStorageSync('userInfo');
    this.setData({
      amt: options.remainAmount,
      mobile: userInfo.phone
    }); // 页面渲染完成
  },
  onReady: function () {},
  onShow: function () {// 页面显示
  },
  onHide: function () {// 页面隐藏
  },
  onUnload: function () {// 页面关闭
  },
  methods: {
    sendCode: function () {
      let that = this;

      if (this.mobile.length == 0) {
        uni.showModal({
          title: '错误信息',
          content: '手机号不能为空',
          showCancel: false
        });
        return false;
      }

      if (!check.isValidPhone(this.mobile)) {
        uni.showModal({
          title: '错误信息',
          content: '手机号输入不正确',
          showCancel: false
        });
        return false;
      }

      uni.request({
        url: api.AuthRegisterCaptcha,
        data: {
          mobile: that.mobile
        },
        method: 'POST',
        header: {
          'content-type': 'application/json'
        },
        success: function (res) {
          if (res.data.errno == 0) {
            uni.showModal({
              title: '发送成功',
              content: '验证码已发送',
              showCancel: false
            });
          } else {
            uni.showModal({
              title: '错误信息',
              content: res.data.errmsg,
              showCancel: false
            });
          }
        }
      });
    },
    goWithdrawal: function () {
      let that = this;

      if (this.mobile.length == 0) {
        uni.showModal({
          title: '错误信息',
          content: '手机号和验证码不能为空',
          showCancel: false
        });
        return false;
      }

      if (!check.isValidPhone(this.mobile)) {
        uni.showModal({
          title: '错误信息',
          content: '手机号输入不正确',
          showCancel: false
        });
        return false;
      } //调用后台申请提现接口


      util.request(api.ApplyWithdrawal, {
        mobile: that.mobile,
        amt: that.amt
      }, 'POST').then(function (res) {
        if (res.errno === 0) {
          uni.showToast({
            title: '提现申请成功,等待审批结算'
          });
          util.redirect('/pages/brokerage/record/record');
        } else {
          util.showErrorToast(res.errmsg);
        }
      });
    },
    bindMobileInput: function (e) {
      this.setData({
        mobile: e.detail.value
      });
    },
    bindCodeInput: function (e) {
      this.setData({
        code: e.detail.value
      });
    },
    clearInput: function (e) {
      if (e.currentTarget.id === 'clear-code') {
        this.setData({
          code: ''
        });
      }
    }
  }
};
</script>
<style>
.form-box {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0 40rpx;
  background: #fff;
}

.form-item {
  position: relative;
  background: #fff;
  height: 96rpx;
  border-bottom: 1px solid #d9d9d9;
}

.form-item .amt, .form-item .mobile, .form-item .code {
  position: absolute;
  top: 26rpx;
  left: 0;
  display: block;
  width: 100%;
  height: 44rpx;
  background: #fff;
  color: #333;
  font-size: 30rpx;
}

.form-item-code {
  margin-top: 32rpx;
  height: auto;
  overflow: hidden;
  width: 100%;
}

.form-item-code .form-item {
  float: left;
  width: 350rpx;
}

.form-item-code .code-btn {
  float: right;
  padding: 20rpx 40rpx;
  border: 1px solid #d9d9d9;
  border-radius: 10rpx;
  color: #fff;
  background: green;
}

.form-item .clear {
  position: absolute;
  top: 26rpx;
  right: 18rpx;
  z-index: 2;
  display: block;
  background: #fff;
  height: 44rpx;
  width: 44rpx;
}

.register-btn {
  margin: 60rpx 0 40rpx 0;
  height: 96rpx;
  line-height: 96rpx;
  color: #fff;
  font-size: 30rpx;
  width: 100%;
  border-radius: 6rpx;
}

</style>